<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实现图片切换</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<!-- vue指令 -->
			<button @click="showCat">显示猫</button>
			<button @click="showDog">显示狗</button>
			<br />
			<!-- 数据变化，图片自动变 -->
			<img :src="img"/>
		</div>
		<script>
		  const { createApp, ref } = Vue
		  const app = createApp({
			  setup() {
				  // 定义数据
				  const img = ref('img/cat.jpg') // 定义响应式字符串
				  // 定义方法
				  const showCat = () => { img.value = 'img/cat.jpg'}
				  const showDog = () => { img.value = 'img/dog.jpg'}
				  return {img, showCat, showDog} //数据要return
			  }
		  })
		  app.mount('#app')
		</script>
	</body>
</html>